<template>
  <div>
    <!-- 冻结弹框规则 -->
    <el-dialog title="余额扣减规则" :visible.sync="dialogVisible" :close-on-click-modal="false" width="750px">
      <el-form ref="form" :model="form" :rules="rules">
        <ul>
          <li>
            <el-radio v-model="form.payRule" :label="1">每笔余额支付实充账户扣除&nbsp;&nbsp;
              <el-form-item prop="payBalancePercent">
                <el-input v-model="form.payBalancePercent" placeholder="请输入" size="small" />
                &nbsp;&nbsp;%，即赠送账户扣除&nbsp;&nbsp;{{ 100-form.payBalancePercent }}%
              </el-form-item>
            </el-radio>
          </li>
          <li>
            <el-radio v-model="form.payRule" :label="2">优先扣除实充账户</el-radio>
          </li>
          <li>
            <el-radio v-model="form.payRule" :label="3">优先扣除赠送账户</el-radio>
          </li>
        </ul>
        <!-- <div class="more">高级选项</div>
        <el-checkbox v-model="form.onlyEnoughRecharge" :disabled="form.payRule!==1">实充账户余额不足不可以付款</el-checkbox> -->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button size="small" round type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { validatePercentage1to99 } from '@/utils/validate.js'
export default {
  props: {
    configForm: {
      type: Object,
      require: true
    }
  },
  data() {
    /**
       * 表单校验方法相关
       */
    const validatePayBalancePercent = (rule, value, callback) => {
      if (this.form.payRule === 1) {
        if (value === '') {
          callback(new Error('请输入实充扣除比例'))
        } else if (!validatePercentage1to99(value)) {
          callback(new Error('请输入1~99正整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      /**
         * 表单校验字段相关
         */
      rules: {
        payBalancePercent: [
          {
            required: true,
            validator: validatePayBalancePercent,
            trigger: ['blur', 'change']
          }
        ]
      },
      // 状态
      dialogVisible: false,
      // 数据
      form: {
        payRule: null,
        payBalancePercent: null,
        onlyEnoughRecharge: false
      }
    }
  },
  watch: {
    form: {
      handler: function(val) {
        if (val.payRule !== 1) {
          this.$refs.form.clearValidate()
        }
      },
      deep: true
    }
  },
  methods: {
    open() {
      this.show()
    },

    show() {
      this.dialogVisible = true
      this.form.payRule = this.configForm.payRule
      this.form.payBalancePercent = this.configForm.payBalancePercent
      this.form.onlyEnoughRecharge = this.configForm.onlyEnoughRecharge
    },

    hide() {
      this.dialogVisible = false
    },

    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.configForm.payRule = this.form.payRule
          this.configForm.payBalancePercent = this.form.payBalancePercent
          this.configForm.onlyEnoughRecharge = this.form.onlyEnoughRecharge
          this.hide()
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  li {
    height: 40px;
    line-height: 40px;
    .el-form-item {
      display: inline-block;
    }
    .el-input {
      width: 80px;
    }
  }
  .more {
    margin: 10px 0;
  }
</style>
